import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class Comment extends Component {
    static propTypes = {
        comment: PropTypes.object.isRequired,
        onDeleteComment: PropTypes.func,
        index: PropTypes.number
    }
    
    constructor() {
        super()
        this.state = { timeString: '' }
    }
    componentWillMount () {
        this._updateTimeString()
    }
    _updateTimeString () {
        const comment = this.props.comment
        const duration = (+Date.now() - comment.createdTime) / 1000
        this.setState({
          timeString: duration > 60
            ? `${Math.round(duration / 60)} 分钟前`
            : `${Math.round(Math.max(duration, 1))} 秒前`
        })
    }

    UNSAFE_componentWillMount () {
        this._updateTimeString()
        this._timer = setInterval(
          this._updateTimeString.bind(this),
          5000
        )
    }
    componentWillUnmount () {
        // console.log('删除当前评论')
        clearInterval(this._timer)
    }
    

    handleDeleteComment () {
        if (this.props.onDeleteComment) {
          this.props.onDeleteComment(this.props.index)
        }
    }
    _getProcessedContent(content){
        let data=content.replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;").replace(/`([\S\s]+?)`/g, '<code>$1</code>')
        // console.log('data',data)
        return data;
    }
    

  render() {
    return (
      <div className="comment">
        <div className="comment-user">
          <span>{this.props.comment.username}</span>: 
        </div>
        <p dangerouslySetInnerHTML={{
        __html: this._getProcessedContent(this.props.comment.content)
        }}></p>
        <span className="comment-createdtime">
            {this.state.timeString}
        </span>
        <span className='comment-delete'  onClick={this.handleDeleteComment.bind(this)}
         >
          删除
        </span>
        
      </div>
    )
  }
}